<template>
    <div class="container">
        <div class="centre">
            <p class="pne" @click="handleClick">X</p>
            <div class="lanz">当前城市-兰州</div>
        </div>
        <div class="nav">
            <input type="text" placeholder="输入城市名或拼音">
        </div>
        <div class="ctx">
            <p class="nba">GPS定位你所在城市</p>
            <div class="cko">兰州</div>
        </div>

         <div class="ctxx">
             <div class="ctxa">
                <p class="nba">热门城市</p>
                <button v-for="item of hots" :key="item" @click="handleCity(item)">{{item}}</button>
                <!-- <button>上海</button>
                <button>深圳</button>
                <button>武汉</button> -->
            </div>
        </div>

        <!-- 使用v-for="(item,index) in city" :key="index"来获取他abcd -->
        <div class="city" v-for="(item,index) in city" :key="index">  
            <!-- v-for="(item,index) in city" :key="index" 获取key的值 对象只有一种方法  -->
            <p>{{Object.keys(item)[0]}}</p>
            <!-- 通过{{Object.keys(item)[0]}} 来获取 -->
            <div class="city-list">
                <ul>
                    <li class="lin" v-for="currentCity in item[Object.keys(item)[0]]" :key="currentCity.id">{{currentCity.name}}</li>
                    <!-- v-for="currentCity in item[Object.keys(item)[0]]" :key="currentCity.id">{{currentCity.name}}使用这个对象和中括号来取里面的各个城市的数值 -->
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'ProIndex',

    data() {
        return {
            text:'',
            city:[],
            hots:["北京","上海","深圳","广州"]
        };
    },

    mounted() {
        var {text} = this.$route.params
        this.text = text
        axios.get('http://47.108.197.28:8000/city').then(
            response =>{
                console.log(response.data.data);
                var cities = response.data.data.cities
                for(var key in cities){
                    this.city.push({[key]:cities[key]})
                }
            }
        )
    },

    methods: {
        handleClick(){
            this.$router.back();
        },
        handleCity(city){
            console.log(city);
    localStorage.setItem("city",city)
      this.$router.back()
        }
    },
};
</script>

<style scoped>
.container{
    background-color: #f0f0f0;
    overflow: hidden;
}
.city{
    width: 100%;
}
.city p{
    margin: 8px 0;
}
.city-list{
    background-color: #f4f4f4
    
}
.lin{
    font-size: 25px;
}
.centre{
    width: 100%;
    height: 80px;
    border: 0px solid red;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}
.pne{
    font-size: 40px;
    margin-top: 14px;
    color: gray;
}
.lanz{
    font-size: 33px;
    position: relative;
    left: -280px;
    top: 15px;
}
.nav{
    margin-top: 10px;
}
input{
    width: 600px;
    height: 50px;
    border: none;
    display: block;
   margin: 0 auto;
    text-indent: 50px;
    font-size: 25px;
}
.ctx{
    font-size: 27px;
    height: 150px;
    border: 0px solid red;
    background-color: #fff;
    margin-top: 18px;
}
.nba{
    margin-left: 80px;
    margin-top: 30px;
    color: gray;
}
.cko{
    width: 200px;
    height: 60px;
    margin-left: 70px;
    margin-top: 10px;
    font-size: 26px;
    line-height: 60px;
    text-align: center;
   background-color: #f4f4f4
   
}
.ctxx{
    font-size: 27px;
    height: 200px;
    border: 0px solid red;
    background-color: #fff;
    margin-top: 38px;
}
.ctxa button{
    width: 150px;
    height: 50px;
    margin-left: 80px;
    margin-top: 20px;
}
</style>